<template>
  <div class="body-color">

    <Header></Header>
    <banner></banner>
    <!-- 版心 -->
    <div class="container-fluid">
      <!-- 最新讯息 -->
      <div class="ContentPlaceHolder1_mainboxes">
       
     <div>
     <div class="box-info">
      <img src="@/assets/img/log.png" alt="">
      <p> <span>Rocket Price</span><span class="spanone-text">+0%</span><br>
      <span class="spantwo-text">$0</span><span>= 0 Rocket</span>
      </p>   
     </div>
     <hr id="hr1">
     <div class="box-info">
      <img src="@/assets/img/left2.png" alt="">
      <p>
        <span class="spansan">Trading Volume    </span><span>Gas Price</span><br>
        <span class="spansi">0 M</span><span class="spanwu"> 0 ETH= </span><span>$0</span>
      </p>
     </div>
     

     </div>
     <hr id="hr1" class="hr1">
     <hr id="hr2">
     
      <div>
     <div> 
      <div class="box-info">
      <img src="@/assets/img/zhong1.png" alt="">
      <p>
        <span>Rocket Market Cap</span><span></span><br>
        <span class="spanliu">$4000000</span><span> = 10000000000 Rocket</span>
      </p>
     </div>
     
     </div>
     <hr id="hr1">
    <div> <div class="box-info">
      <img src="@/assets/img/zhong2.png" alt="">
      <p>
        <span class="spansan">Last Block</span><span >Voting Power</span><br>
        <span><span class="spanliu">0</span>(0s)</span><span class="spanwu"> 0 BNB</span>
      </p>
     </div>
     </div>
      </div>
      <hr id="hr1" class="hr1">
      <hr id="hr2">
      <div>
         <highcharts :options="chartOptions" style="height: 100%;"></highcharts>
      </div>
      </div>
    </div>






    <div class="container-fluid">
      <div class="latest-trade">
        <div class="trade latest-blocks">
          <div class="card-header">Latest Blocks</div>
          <div class="card-bodys">
          
          <div v-for="(item,index) in blockArray" :key="index+1">

             <div class="media" >
                <div class="d-box">
                  <span class="d-box">
                    <span class="btn">
                      BK
                    </span>
                  </span>
                </div>
                <div class="media-body">
                  <div class="media-body-header">
                   <span><a href="#" @click="goToBlockInfo(item)">{{item.number}}</a></span>
                  <br>
                  <span>{{getTimeDifference(item.timestamp)}}</span>
                  </div>
                   <div class="media-dsc">
                     <span>Fee Recipient <a class="kaicaiz">{{item.miner.slice(0, 11)}}....</a> </span>
                     <br>
                     <span><a href="#">{{item.transactions}} txns </a>in {{differenceInSeconds(item.timestamp)}} secs</span>
                   </div>
                </div>
                  <div class="eth-number">
                    <a class="media-body-span">{{parseFloat(isNull(item.totalReward))}} ROCKET</a>
                  </div>
              </div>
              <hr class="show-hr" v-if="blockArray.length-1!=index">
          </div>
             
      
          </div>
          <div class="card-footer"  @click="goToBlockPage" style="cursor: pointer;">VIEW ALL BLOCKS</div>
        </div>
        <div class="trade latest-transactions"> <div  class="card-header">Latest Transactions</div>
          <div class="card-bodys">
             <div v-for="(item,index) in transactionArray" :key="index+1">
              <div class="media">
                <div class="d-box">
                  <span class="d-box">
                    <span class="btn">
                      TX
                    </span>
                  </span>
                </div>
                 <div class="media-body">
                  <div class="media-body-header">
                   <span @click="goToTransactionInfo(item)"><a href="#">{{item.hash.slice(0, 13)}}....</a></span>
                  <br>
                  <span>{{getTimeDifference(item.timestamp)}}</span>
                  </div>
                   <div class="media-dsc" >
                     <span @click="goToFromAddressInfo(item)">from <a href="">{{item.from.slice(0, 18)}}....</a> </span>
                     <br>
                     <span @click="goToAddressInfo(item)">to <a href="#">{{item.to.slice(0, 18)==""?"null":item.to.slice(0, 18)}}.... </a></span>
                   </div>
                </div>
                  <div class="eth-number">
                    <a class="media-body-span">{{parseFloat(isNull(item.value))}} ROCKET</a>
                  </div>
              </div>
               <hr class="show-hr" v-if="transactionArray.length-1!=index">
              </div>
          </div>
          <div class="card-footer" @click="goToTransactionPage" style="cursor: pointer;">VIEW ALL TRANSACTIONS</div></div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import {Chart} from 'highcharts-vue'
import '@/assets/css/Home.css';
import {getBrowserBlock,getTransaction,getBrowserChainData} from '@/api/home.js';
import Header from '@/components/Header.vue';
export default {
  components: { Header,highcharts:Chart},
  name: 'Home',
  data(){
    return {
       blockArray:[],
       transactionArray:[],
       chainData:{},


 
      // --------------------------------------
      chartOptions: {
        chart: {
          spacingTop: 10,
          spacingBottom: 0,
          spacingLeft: 0,
          spacingRight: 10,
          type: 'spline', // 设置图表类型
        },
        title: {
          text: '',
          align: 'left',
        },
        xAxis: {
          title: { text: '' },
          categories: [
            'Mar 14', 'Mar 15', 'Mar 16', 'Mar 17', 'Mar 18', 'Mar 19', 'Mar 20',
            'Mar 21', 'Mar 22', 'Mar 23', 'Mar 24', 'Mar 25', 'Mar 26', 'Mar 27', 'Mar 28',
          ],
          labels: {
            step: 7,
          },
        },
        yAxis: {
          labels: {
            enabled: true,
          },
          gridLineWidth: 0,
          title: {
            text: null,
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          formatter: function () {
            return `<span style="font-size:10px">${this.point.friendlydate}</span><br>
                <table class="text-dark"><tr><td style="padding:0">
                <span class="text-dark">Transactions: </span><b>${this.point.formattedValue}</b><br>
                <br>Price: ${this.point.price}</td></tr></table>`;
          },
        },
        plotOptions: {
          series: {
            color: '#1e2022',
            lineWidth: 1,
            marker: {
              radius: 0,
            },
            point: {
              events: {
                select: function () {
                  // 注意：在Vue中，你可能需要另一种方法来处理点击事件，而不是直接使用location.href
                  this.$router.push({ path: `txs?dt=${this.options.dt}` });
                }.bind(this),
              },
            },
          },
        },
        series: [{
          name: 'Transactions',
          type: 'spline',
          data: [{y : 0, dt : '1710374400', formattedValue : '0', friendlydate : 'Thursday, March 0', price : '$0'  },
          {y : 0, dt : '1710460800', formattedValue : '0', friendlydate : 'Friday, March 0', price : '$0'  },
          {y : 0, dt : '1710547200', formattedValue : '0', friendlydate : 'Saturday, March 0', price : '$0'  },
          {y : 0, dt : '1710633600', formattedValue : '0', friendlydate : 'Sunday, March 0', price : '$0'  },
          {y : 0, dt : '1710720000', formattedValue : '0', friendlydate : 'Monday, March 0', price : '$0'  },
          {y : 0, dt : '1710806400', formattedValue : '0', friendlydate : 'Tuesday, March 0', price : '$0'  },
          {y : 0, dt : '1710892800', formattedValue : '0', friendlydate : 'Wednesday, March 0', price : '$0'  },
          {y : 0, dt : '1710979200', formattedValue : '0', friendlydate : 'Thursday, March 0', price : '$0'  },
          {y : 0, dt : '1711065600', formattedValue : '0', friendlydate : 'Friday, March 0', price : '$0'  },
          {y : 0, dt : '1711152000', formattedValue : '0', friendlydate : 'Saturday, March 0', price : '$0'  },
          {y : 0, dt : '1711238400', formattedValue : '0', friendlydate : 'Sunday, March 0', price : '$0'  },
          {y : 0, dt : '1711324800', formattedValue : '0', friendlydate : 'Monday, March 0', price : '$0'  },
          {y : 0, dt : '1711411200', formattedValue : '0', friendlydate : 'Tuesday, March 0', price : '$0'  },
          {y : 0, dt : '1711497600', formattedValue : '0', friendlydate : 'Wednesday, March 0', price : '$0'  },
          {y : 0, dt : '1711584000', formattedValue : '0', friendlydate : 'Thursday, March 0', price : '$0'  },],
          allowPointSelect: true,
          pointStart: 0
        }],
      },


    }
  },

methods:{
isNull(arg){
  if(arg==null||arg==''){
    return 0;
  }else{
    return arg;
  }
},
  goToBlockInfo(item){
    this.$router.push({name:'blockInfo',params:{blockId:0,inputValue:item.number}})
  },
  goToTransactionInfo(item){
    this.$router.push({name:'transactionInfo',params:{inputValue:item.hash}})
  },

  goToAddressInfo(item){
    this.$router.push({name:'transactionInfoAddress',params:{inputValue:item.to}})
  },
  goToFromAddressInfo(item){
    this.$router.push({name:'transactionInfoAddress',params:{inputValue:item.from}})
  },

  getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },


    goToTransactionPage() {
      this.$router.push('/transaction');
    },
    goToBlockPage(){
      this.$router.push('/block');
    },


    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getBrowserBlock({
        cursor: 0, // 每页10条
        ps: 8
      })
      this.blockArray=res.data.blockInfo
    },


async onLoadBrowserChainData () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getBrowserChainData({
      
      })
      this.chainData=res.data
    },
     

   async onLoadTransaction(){
      const res=await getTransaction({
        cursor:0,
        ps:8
       })
     this.transactionArray=res.data.transactionsInfo
   },
    formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 10)}....${str.substr(-10)}`;
      }
    }
  },





  created(){
   this.onLoad();
   this.onLoadTransaction();
   this.onLoadBrowserChainData();
  }
}

</script>

<style>
 .body-color{
  background-color:rgba(255, 252, 176, 1) !important;
  } 
</style>